<template>
  <div id="app">
    <h2>普通数组</h2>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}--{{ index }}</li>
    </ul>
    <h2>普通对象</h2>
    <ul>
      <li v-for="(value, key, index) in obj" :key="index">
        {{ value }}--{{ key }}--{{ index }}
      </li>
    </ul>
    <h2>数组对象(重点)</h2>
    <ul>
      <!-- value.id:唯一值 -->
      <li v-for="(value, index) in arrObj" :key="value.id">
        {{ value.id }}--{{ value.name }}--{{ index }}
      </li>
    </ul>
    <h2>字符串</h2>
    <ul>
      <li v-for="(item, index) in str" :key="index">{{ item }}--{{ index }}</li>
    </ul>
    <h2>数值</h2>
    <ul>
      <li v-for="(item, index) in num" :key="index">{{ item }}--{{ index }}</li>
    </ul>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      arr: ["apple", "banana", "grape", "orange", "pitaya", "carambola"],
      obj: {
        id: "s0001",
        name: "毛威龙",
        age: 20,
        sex: "男",
      },
      arrObj: [
        {
          id: "s0001",
          name: "毛威龙1",
          age: 20,
          sex: "男",
        },
        {
          id: "s0002",
          name: "毛威龙2",
          age: 20,
          sex: "男",
        },
        {
          id: "s0003",
          name: "毛威龙3",
          age: 20,
          sex: "男",
        },
      ],
      str: "HelloVue",
      num: 10,
    };
  },
  methods: {},
};
</script>

<style>
</style>
